Syntax:
$scope.$on("$ionicView.afterEnter", function (event) {
//Autostart function
});Example:
$scope.$on("$ionicView.afterEnter", function (event) {
$scope.view.wdg['label-1'].text = "View Loaded";
});If you want something to happen after some time passes. You can put your code within a timeout function.
A timeout function gets called after the milliseconds stated afterwards. If you want the function to fire after 1 second pass, set the milliseconds to 1000.
Syntax:
$timeout(function() {
}, 1000);Example:
$timeout(function() {
console.log("Using Javascript is really cool!");
}, 1000);Offical AngularJS Documenation
You're able to get and set the global parameters that you've defined in the application parameters pane.
Syntax:
$scope.app.params['parameterName'] = ""; Example:
$scope.app.params['nextButtonActive'] = true; You're able to change the widget properties via the following syntax. You need to define the Studio ID in the first brackets and seen in the example.
Syntax:
$scope.view.wdg['studioID']['propertyName'] = ""; Example:
$scope.view.wdg['model-1']['visible'] = true;You can call services of widgets that support a specific event (see widget doc for more information) by built in API. Once called, it will fire that service.
Syntax:
twx.app.fn.triggerWidgetService(widgetId, serviceName);
Example:
twx.app.fn.triggerWidgetService('audio-1', 'play');You can trigger events of widgets that support a specific event (see widget doc for more information) by built in API. Once called, it will emit that event.
Syntax:
twx.app.fn.triggerStudioEvent(widgetId, serviceName);
Example:
twx.app.fn.triggerStudioEvent('button-1', 'click');You're able to add a Javascript function to any widget that has an event. For that you need to setup a Javascript function and match the name in the inspector. Below you'll find an example with a button click event.
Syntax:
$scope.eventFunction = function () {
};Example:
$scope.buttonPress = function () {
$scope.view.wdg['button-1']['disabled'] = false;
};You're able to trigger all added External Data Services
Syntax:
twx.app.fn.triggerDataService(thingName, dataServiceName, inputData)
Example:
twx.app.fn.triggerDataService("Raspberry-Pi", "setName", {'name':'Model B+'});You're able to listen on the Events of Data Services. Available are serviceInvokeComplete and serviceFailure
Syntax:
$scope.$on('dataServiceName.serviceInvokeComplete', function(evt, arg) {
});Example:
$scope.$on('WindchillPartQueryJSON.serviceInvokeComplete', function(evt, arg) {
let data = twx.app.mdl["Extractor"].svc["WindchillPartQueryJSON"].data;
$scope.view.wdg['label-1'].text = data.parts;
});Should still be added: Where do I find the 3dcontainerName.js?
$scope.$on('newStep', function(evt, arg) {
// $scope.setWidgetProp( "Label-1", "text", arg);
console.log(evt);
});
$scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover
You can add the icons to your labels and buttons by writing icon-name icon in the Class property of your 2D item, as seen in the example above.
You can use most icons from the Ionic Framework (V1) which gives you a large variety of icons.
testing.
F12 for testing, finding out different preset information. Change on the fly, and when satisfied, copy info to Studio.
The image target allows you to use an image as the tracking method of the AR experience. This means that all 3D widgets in the scene are relative to the position of the target.
Official Image Target Documentation | Optimizing Target Detection and Tracking Stability
| Property | Type | Name | Description |
|---|---|---|---|
url |
string | Image | Path to the image being used as the image target. (Not changeable during runtime!) |
width |
number | Marker Width | The width of the image target. |
istracked |
number | Tracked | Is true when the camera has recognized the image target. |
trackingIndicator |
boolean | Display Tracking Indicator | If true, it shows a green tracking outline of the marker when tracking. |
stationary* |
boolean | Stationary | Comes from underlying Vuforia SDK/Engine. Targets are always in a Tracker Element. A Tracker is like a unique coordinate system. Stationary true means the Target is fixed in the coordinate system false that it is dynamically in the coordinate system and could be moved with the related widgets. |
*Only available in 3D Eyewear Experiences
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
| Event | Name | Description |
|---|---|---|
trackingacquired |
Tracking Acquired | Fired when the image is recognized by the camera. |
trackinglost |
Tracking Lost | Fired when the camera no longer recognizes the image. |
The model target allows you to use a real-life object (Let it be a toy car, a machine in a factory or your newly bought BMW) as the tracking method of the AR experience. This means that all 3D widgets in the scene are relative to the position of the target.

Official Model Target Documentation | Supported Objects & CAD Model Best Practices
| Property | Type | Name | Description |
|---|---|---|---|
istracked |
boolean | Tracked | Is true when the camera has recognized the real-life object as the model target. |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
| Event | Name | Description |
|---|---|---|
trackingacquired |
Tracking Acquired | Fired when the object is recognized by the camera. |
trackinglost |
Tracking Lost | Fired when the camera no longer recognizes the object. |
The spatial target allows you to not use any marker as the tracking method of the AR experience. All 3D widgets in the scene are relative to the initial position of the target. The user is able to pan, rotate and scale the initial position with gestures.

Official Spatial Target Documentation | Supported Devices
| Property | Type | Name | Description |
|---|---|---|---|
istracked |
boolean | Tracked | Is true when the camera has recognized the image target. |
enablescalegesture |
boolean | Enable Scale Gesture | Enables the scale gesture. This changes the size of the scene. |
enabletranslategesture |
boolean | Enable Pan Gesture | Enables the pan gesture. This allows the user to move the scene around. |
enablerotategesture |
boolean | Enable Rotate Gesture | Enables the rotate gesture. With two fingers, the user can rotate the scene. |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
| Service | Name | Description |
|---|---|---|
resetGesture |
Reset Gesture Changes | Calling this service resets the spatial target to it's default settings. |
| Event | Name | Description |
|---|---|---|
trackingacquired |
Tracking Acquired | Fired when the image is recognized by the camera. |
trackinglost |
Tracking Lost | Fired when the camera no longer recognizes the image. |
A ThingMark functions similar to an image target, but also is a uniquely identifiable market that is universally recognizable by the Vuforia View app. It's used as a tracking method of the AR experience. This means that all 3D widgets in the scene are relative to the position of the target.

Official ThingMark Documentation
| Property | Type | Name | Description |
|---|---|---|---|
markerId |
string | ThingMark | This is the ThingMark ID. |
width |
number | Marker Width | This is the width of the marker. |
trackingIndicator |
boolean | Display Tracking Indicator | If true, it shows a green tracking outline of the marker when tracking. |
istracked |
boolean | Tracked | Is true when the camera has recognized the ThingMark. |
stationary* |
boolean | Stationary | Comes from underlying Vuforia SDK/Engine. Targets are always in a Tracker Element. A Tracker is like a unique coordinate system. Stationary true means the Target is fixed in the coordinate system false that it is dynamically in the coordinate system and could be moved with the related widgets. |
*Only available in 3D Eyewear Experiences
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
| Event | Name | Description |
|---|---|---|
trackingacquired |
Tracking Acquired | Fired when the object is recognized by the camera. |
trackinglost |
Tracking Lost | Fired when the camera no longer recognizes the object. |
Note: Only available in 3D Eyewear experiences.
The 3D button acts as a button in the 3D environment.

Official 3D Button Documentation
| Property | Type | Name | Description |
|---|---|---|---|
text |
string | Text | Change the text of the label. |
src |
string | Resource | Path to the image. This replaces the text. |
height |
number | Height | Change the button height in Meters. |
width |
number | Width | Change the button width in Meters |
fontColor |
string | Font Color | Changes the text color. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF. |
buttonColor |
string | Button Color | Changes the button color. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF. |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
| Event | Name | Description |
|---|---|---|
click |
Click | Fired when the user interacts with the button by clicking/touching on it. |
The gauge allows you to visualize a value as a gauge in the 3D environment.

Official 3D Gauge Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
src |
string | Resource | Path to the background gauge icon. There are different presets in Studio to choose from. |
font |
string | Font | Name of the font you want to use. Because Studio creates a HTML5 canvas you need to use a custom font in the experience before to let them work. To import custom font see CSS-101 |
fontsize |
string | Font Size | Size of the font used on the canvas/image of the gauge |
textattrs |
string | Text Attributes | Here you can add text color(fill), stroke/outline color(stroke), decoration and CSS(svg) properties |
enableStateFormatting |
boolean | Enable State-Based Formatting | If enabled you could use style definitions of Thingworx. This needs a property of the 3D Gauge itself which become the value like 50°C. (default the text property) and a State Definition defined in Thingworx, like predefined one "SimpleAlarm" |
stateFormatValue |
string | Dependent Field | Own widget property which becomes the value to result in a style change (default text) |
stateFormat |
boolean | State Definition | Select here the State Definition defined in Thingworx. This will change default Gauge SVG colors
|
textx |
number | X coord of Text w/r/t Canvas | The value same like pixel where on the on the X axis of canvas (starting on top left side) the text should be placed |
texty |
number | Y coord of Text w/r/t Canvas | The value same like pixel where on the on the Y axis of canvas (starting on top left side) the text should be placed |
imagex |
number | X coord of Image w/r/t Canvas | The value same like pixel where on the on the X axis of canvas (starting on top left side) the resource image should be placed |
imagey |
number | Y coord of Image w/r/t Canvas | The value same like pixel where on the on the Y axis of canvas (starting on top left side) the resource image should be placed |
canvasgrowthoverride |
string | Canvas Growth Override | This value will set or override the property canvasheight and canvaswidth depends on the four input parameter.
|
canvasheight |
number | Canvas Height | Defines the height of the HTML5 canvas used by 3D Gauge (only used if canvasgrowthoverride is set to canvas |
canvaswidth |
number | Canvas Width | Defines the width of the HTML5 canvas used by 3D Gauge (only used if canvasgrowthoverride is set to canvas |
height |
number | Height | Beside scale there is a value for the height in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property) |
width |
number | Width | Beside scale there is a value for the width in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property) |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
scale |
string | Scale | The scale of the 3D widget. Changing this makes the object bigger, or smaller. |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
occlude |
boolean | Occluding | Makes all widgets behind this widget area transparent. |
decal |
boolean | Always On Top | Changes the rendering of this widget so that it is always on top, or not depending on the given value. |
opacity |
number | Opacity | Changes the transparency of the widget. |
| Event | Name | Description |
|---|---|---|
click |
Click | Fired when the user interacts with the gauge by clicking/touching on it. |
The image widget allows you to visualize an image in the 3D environment.
Official 3D Image Widget Documentation | Supported File Formats
| Property | Type | Name | Description |
|---|---|---|---|
src |
string | Resource | Path to the background gauge icon. There are different presets in Studio to choose from. |
class |
string | Class | Sets the CSS class of the text. |
height |
number | Height | Beside scale there is a value for the height in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property) |
width |
number | Width | Beside scale there is a value for the width in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property) |
billboard |
boolean | Billboard | If true, the widget will always face the camera. |
pivot |
number | Pivot | Sets the rotation point of the billboarding. A number between 1-9 starting from Top Left 1 and ends by Bottom Right 9. (It's not changeable during runtime) |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
scale |
string | Scale | The scale of the 3D widget. Changing this makes the object bigger, or smaller. |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
occlude |
boolean | Occluding | Makes all widgets behind this widget area transparent. |
decal |
boolean | Always On Top | Changes the rendering of this widget so that it is always on top, or not depending on the given value. |
opacity |
number | Opacity | Changes the transparency of the widget. |
| Event | Name | Description |
|---|---|---|
click |
Click | Fired when the user interacts with the gauge by clicking/touching on it. |
| Property | Description |
|---|---|
background-color |
Sets the (background) color of the 3D image widget. |
border-color |
Sets the border color around the 3D image widget. |
border-radius |
Sets the border radius around the 3D image widget. |
border-style |
Sets the border style around the 3D image widget. |
border-width |
Sets the border width around the 3D image widget. |
border |
Combines all border settings. |
padding |
Applies padding outside of the image. |
The 3D label widget allows you to place text in the 3D environment.

Official 3D Label Documentation
| Property | Type | Name | Description |
|---|---|---|---|
text |
string | Text | Change the text of the label widget. |
fontFamily |
string | Font Family | Sets the font. Fonts are dependent on the device. |
fontColor |
string | Font Color | Changes the text color. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF. |
fontOutlineColor |
string | Outline Color | Changes the outline of the text. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF. |
class |
string | Class | Sets the CSS class of the text. |
height |
number | Height | Beside scale there is a value for the height in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property) |
width |
number | Width | Beside scale there is a value for the width in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property) |
billboard |
boolean | Billboard | If true, the widget will always face the camera. |
pivot |
number | Pivot | Sets the rotation point of the billboarding. A number between 1-9 starting from Top Left 1 and ends by Bottom Right 9. (It's not changeable during runtime) |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
scale |
string | Scale | The scale of the 3D widget. Changing this makes the object bigger, or smaller. |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
occlude |
boolean | Occluding | Makes all widgets behind this widget area transparent. |
decal |
boolean | Always On Top | Changes the rendering of this widget so that it is always on top, or not depending on the given value. |
opacity |
number | Opacity | Changes the transparency of the widget. |
| Event | Name | Description |
|---|---|---|
click |
Click | Fired when the user interacts with the label by clicking/touching on it. |
| Property | Description |
|---|---|
font-family |
Sets the font family. |
color |
Sets the font color. |
--text-stroke-color |
Sets the stroke color of the font. |
--text-stroke-width |
Sets the width of the stroke (border) around the font. |
font-weight |
Sets the thickness of the font. |
font-style |
Changes the style of the font. (Normal, Bold, Italic, etc.) |
background-color |
Sets the (background) color of the 3D label widget. |
text-decoration |
Supports underlining of the text. |
border-color |
Sets the border color around the 3D label widget. |
border-radius |
Sets the border radius around the 3D label widget. |
border-style |
Sets the border style around the 3D label widget. |
border-width |
Sets the border width around the 3D label widget. |
border |
Combines all border settings. |
padding |
Applies padding outside of the text. |
The model widget allows you to add 3D models to your experiences.
Official Model Widget Documentation | Supported 3D Model Formats
| Property | Type | Name | Description |
|---|---|---|---|
src |
string | Resource | Path to the model which is displayed via the model widget. |
sequence |
string | Sequence | Path to the animation sequence which is played via the model widget. |
currentStep |
number | Current Step | The current step of the animation sequence. |
steps |
number | Steps | Total step count of the animation sequence. |
playing |
boolean | Playing | Is true when the animation sequence is playing. (If not, it's undefined) |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
scale |
string | Scale | The scale of the 3D widget. Changing this makes the object bigger, or smaller. |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
occlude |
boolean | Occluding | Makes all widgets behind this widget area transparent. |
decal |
boolean | Always On Top | Changes the rendering of this widget so that it is always on top, or not depending on the given value. |
opacity |
number | Opacity | Changes the transparency of the widget. |
| Service | Name | Description |
|---|---|---|
forward |
Forward | Calling this service jumps to the next step of the animation sequence. |
play |
Play | Triggers the current step of the animation sequence. |
playAll |
PlayAll | Plays all steps of the animation sequence without stopping. |
reset |
Reset | Resets all models in the view to the first step. |
rewind |
Rewind | Sets the current step to the previous one. |
stop |
Stop | This interrupts the current playing step of the animation sequence. |
| Event | Name | Description |
|---|---|---|
playstarted |
Play Started | Fired when 'Play' or 'Play All' is fired as a service. |
playstopped |
Play Stopped | Fired when the 'Play', 'Play All' or 'Stop' services are fired. |
modelLoaded |
Model Loaded | Fired when a model is fully loaded. |
click |
Click | Fired when the user interacts with the model by clicking/touching on it. |
The model item allows you to divide a model in different parts, depending on the model structure. With this you can change the color of only one part, instead of the whole model.
Official Model Item Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
model |
string | Model ID | Path to the model which the item depends on. |
idpath |
string | Component Occurrence | This is the index structure of the model item. |
color |
string | Color | Current color of the model item. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF. |
| Property | Type | Name | Description |
|---|---|---|---|
x |
number | X | The X coordinate. |
y |
number | Y | The Y coordinate. |
z |
number | Z | The Z coordinate. |
rx |
number | X | The X rotation. |
ry |
number | Y | The Y rotation. |
rz |
number | Z | The Z rotation. |
scale |
string | Scale | The scale of the 3D widget. Changing this makes the object bigger, or smaller. |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
occlude |
boolean | Occluding | Makes all widgets behind this widget area transparent. |
decal |
boolean | Always On Top | Changes the rendering of this widget so that it is always on top, or not depending on the given value. |
opacity |
number | Opacity | Changes the transparency of the widget. |
| Event | Name | Description |
|---|---|---|
click |
Click | Fired when the user interacts with the model item by clicking/touching on it. |
The Camera widget allow you to take screenshots out of the Experience, if you want with or without Augmentations.
Only available in 3D Eyewear Experiences
Official Camera Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
isAugmentationsHidden |
boolean | Hide 3D Augmentations | When selected, 3D augmentations for the screenshot are hidden. |
image |
string | Image Data | A base64-encoded string (text) of the resulting JPEG image taken by the camera. |
imageUrl |
string | Image URL | Wraps the image data above into a hyperlink which can be embedded in a web page, or bound as the Resource of a 3D Image widget. |
| Service | Name | Description |
|---|---|---|
takePicture |
Take Picture | Calling this service create a screenshot. |
| Event | Name | Description |
|---|---|---|
pictureTaken |
Picture Taken | Triggered when the picture is taken. |
userCanceled |
User Canceled | Triggered when a user cancels the camera. |
The Scan widget allows you to scan QR or bar codes in an Experience.
Official Scan Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
isAugmentationsHidden |
boolean | Hide 3D Augmentations | When selected, 3D augmentations for the screenshot are hidden. |
scannedValue |
string | Scanned Value | When bound to a widget that includes text, this property displays the value of the barcode or QR code. For example, if a barcode on a computer is scanned, the serial number is displayed. |
| Property | Type | Name | Description |
|---|---|---|---|
text |
string | Text | The text that is displayed when scan view appears. |
class |
string | Class | Here you add CSS classes to change the appearance (like class attribute in HTML) |
| Service | Name | Description |
|---|---|---|
startScan |
Start Scan | Invoking this service will start the camera to scan for a code. |
stopScan* |
Stop Scan | Invoking this service will stop the camera to scan for a code. |
*Only available in 3D Eyewear Experiences
| Event | Name | Description |
|---|---|---|
valueacquired |
Value Acquired | Triggered when the scan value is acquired. |
usercanceled |
User Canceled | Triggered when a user cancels the scan. |
The TML widget is a multi-functional widget that allows you to add HTML/OpenGL/HLSL(DirectX11) code and even create custom widgets.
To keep it short, it is a HTML text box. Everything you wrote into the Text property has to follow the syntax of HTML.
Official TML Text Widget Documentation | TML Shader Tutorial
Add Widgets/Elements via TML
<button style="" class="button " twx-native-events="">Scan</button>Add OpenGL/HLSL via TML
<script name="YOURSHADERNAME" type="x-shader/x-fragment"></script>
<script name="YOURSHADERNAME" type="x-shader/x-vertex"></script>Add JS via TML
<script>
var some = "Test";
</script>The Card allows grouping some 2D widgets in a box with background color. It has also default a scroll property so it's useful for contents which is bigger than the area.
Official Card Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
header |
string | Header | Here you could write some headings which gets displayed as a label Note: you can't see the properties effect during design time, it only takes effect in preview and Vuforia View |
footer |
string | Footer | Same as the header property define here some text for the footer |
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
padding |
string | Padding | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding. |
margin |
string | Margin | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin. |
The footer does what you expect from the name. It will add a box to the bottom of the screen. This widget use some entities from the ionic framework.
Note: If you place this widget in the experience it is no longer possible to hide the Navigation Menu
Official Footer Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a" |
The Grid Layout helps to align and justify your content right. The widget based on the flex concept of CSS and provides many functions to help layouting.
Official Gird Layout Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
evenlyspacedrows |
boolean | Rows Divide Available Height Evenly | Dependent on the height of the Grid Layout (if you set one via css) all Row widgets inside the Grid gets the same height (for best results don't set the rowheight property of the Row widget). |
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
margin |
string | Margin | Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin. |
| Action Name | Description |
|---|---|
| Add Row | Adds a Row widget to the Gird Layout and place it in bottom of the last one. |
The row widget is a sub widget of the Grid Layout and only creatable with Grid Actions.
Note: It is not direct possible to change properties dynamically via JS because they get a random studio ID
| Property | Type | Name | Description |
|---|---|---|---|
rowclass |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
rowheight |
string | Row Height | This property sets the HTML elements height attribute and allows you to set a fixed height to the specific row. |
| Action Name | Description |
|---|---|
| Add Column | Adds a Column widget to the Row widget by default the columns dividing the row evenly. |
| Add Row | Adds a Row widget to the Gird Layout and place it in bottom of the last one. |
The column widget is a sub widget of the Grid Layout and only creatable with Grid Actions of a Row or Column itself
Note: It is not direct possible to change properties dynamically via JS because they get a random studio ID
| Property | Type | Name | Description |
|---|---|---|---|
fixedcolsize |
string | Fixed Column Size | This property sets the HTML elements width attribute and allows you to set a fixed width to the specific column.Note: This is not perfect visible in design time! |
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
padding |
string | Padding | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding. |
flexdirection |
string | Flex Direction | Same like the flex-direction property in css. Defines if widgets placed into this widget layout like in a row or column. (see here for more information) |
justification |
string | Justification | Depending of what is set in felxdirection property, it changes the position of included widgets (row = horizontally / column = vertical).
|
alignment |
string | Alignment | Depending of what is set in felxdirection property, it changes the position of included widgets (row = vertical / column = horizontal).
|
wrap |
string | Content Wrap | This property defines, if widgets inside the box are dependent of the box size. It's also dependent of what is set in in felxdirection property. To get a better understanding see here for more information.
|
| Action Name | Description |
|---|---|
| Add Column | Adds a Column widget to the Row widget by default the columns dividing the row evenly. |
The header does what you expect from the name. It will add a box to the top of the screen divided into three sections. This widget use some entities from the ionic framework and add it's content direct to the Navigation Menu.
Note: If you place this widget in the experience it is no longer possible to hide the Navigation Menu
Official Header Widget Documentation
-
-
-
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
| Property | Type | Name | Description |
|---|---|---|---|
align |
string | Alignment | Select here if the content in this box is left(primary) or right(secondary) aligned to the Header Title.
|
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
This widget combine the card and column widget and have different properties as the default created panels by the 2D-Body. It has the default scroll overflow and allows you to place content which is larger than the area.
Official Panel Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
height |
string | Height | This property sets the HTML elements style attribute and allows you to set a fixed height in units like px, %, vw, vh etc. |
width |
string | Width | This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc. |
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
padding |
string | Padding | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding. |
flexdirection |
string | Flex Direction | Same like the flex-direction property in css. Defines if widgets placed into this widget layout like in a row or column. (see here for more information) |
justification |
string | Justification | Depending of what is set in felxdirection property, it changes the position of included widgets (row = horizontally / column = vertical).
|
alignment |
string | Alignment | Depending of what is set in felxdirection property, it changes the position of included widgets (row = vertical / column = horizontal).
|
wrap |
string | Content Wrap | This property defines, if widgets inside the box are dependent of the box size. It's also dependent of what is set in in felxdirection property. To get a better understanding see here for more information.
|
The Popup is a wonderful container which allow us to group widgets and create an area in front of all other elements. One of the most useful features is the hide in design time. Which makes it easier to keep a big experience organized.
Official Popup Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
centered |
boolean | Centered | If true the popup container is centered to the horizontal and vertical center depend of the screen. It adds following css: top: 50%; left: 50%; transform: translate(-50%, -50%); If false it adds the property top, bottom, left and right |
type |
string | Type | Sets if content behind the popup should be selectable (floating) or blured and not selectable (modal) values are:
|
centered is false)| Property | Type | Name | Description |
|---|---|---|---|
top |
string | Top | This property sets the HTML elements style attribute and allows you to set a fixed top in units like px, %, vw, vh etc. |
bottom |
string | Bottom | This property sets the HTML elements style attribute and allows you to set a fixed bottom in units like px, %, vw, vh etc. |
left |
string | Left | This property sets the HTML elements style attribute and allows you to set a fixed left in units like px, %, vw, vh etc. |
right |
string | Right | This property sets the HTML elements style attribute and allows you to set a fixed right in units like px, %, vw, vh etc. |
| Property | Type | Name | Description |
|---|---|---|---|
height |
string | Height | This property sets the HTML elements style attribute and allows you to set a fixed height in units like px, %, vw, vh etc. |
width |
string | Width | This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc. |
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
padding |
string | Padding | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding. |
| Service | Name | Description |
|---|---|---|
hidepopup |
Hide Popup | The service sets the visible property of the popup to false. |
showpopup |
Show Popup | The service sets the visible property of the popup to true. |
The Repeater is a powerful widget to display dynamic content. It provides together with a Gird Layout the possibility to create own customized tables. So you can repeat every widget in the table you want. The only thing you need is an Infotable property on a Thing in Thingworx and an assigned Datashape.
Use a JSON Array instead of an Infotable Tutorial
Official Repeater Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
repeatercontentclass |
string | Repeater Cell Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
repeatercontentwidth |
string | Repeater Cell Width | This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc. |
repeatercontentheight |
string | Repeater Cell Height | This property sets the HTML elements style attribute and allows you to set a fixed height in units like px, %, vw, vh etc. |
repeatercontentpadding |
string | Repeater Cell Padding | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding. |
repeatercontentmargin |
string | Cell Margin | Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin. |
selection |
boolean | Selection | Sets if a row or an entry is selectable or not (this is related to the current selected row bindings of a service) |
multiselect |
boolean | Multi-Select | Sets if more than one row or an entry is selectable at the same time (this is related to the current selected row bindings of a service and only visible if selection is set to true) |
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
Data |
infotable | Data | It is the property which handles lists or more structured JSONs so called Infotables. This information coming from Thingworx Service with Infotable Output. |
width |
string | Width | This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc. |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
flexdirection |
string | Flex Direction | Same like the flex-direction property in css. Defines if widgets placed into this widget layout like in a row, column, row-reversed or column-reversed. (see here for more information) |
justification |
string | Justification | Depending of what is set in felxdirection property, it changes the position of included widgets (row = horizontally / column = vertical).
|
alignment |
string | Alignment | Depending of what is set in felxdirection property, it changes the position of included widgets (row = vertical / column = horizontal).
|
wrap |
string | Content Wrap | This property defines, if widgets inside the box are dependent of the box size. It's also dependent of what is set in in felxdirection property. To get a better understanding see here for more information.
|
| Event | Name | Description |
|---|---|---|
itemclick |
Item Click | Fired when the user interacts with a row or entry of the repeater by clicking/touching on it. |
The Tabs Widget helps if you need multiple containers with many content to clean up your interface and pre sort configurations. It helps also with limited space.
Official Tabs Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
taborientation |
string | Tab Orientation | Sets if the Tab content is aligned to the right or bottom of the tab button. |
tabpadding |
string | Tab Padding | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding. |
stripclass |
string | Tab Strip Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
margin |
string | Margin | Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin. |
| Action Name | Description |
|---|---|
| Add Tab | Adds a Tab widget to the Tabs and place it in bottom of the last one. |
| Event | Name | Description |
|---|---|---|
clicktab |
Tab Click | Same like the click event of a normal button. |
The Tab widget is a sub widget of the Tabs and only creatable with Tab Actions.
Note: It is not direct possible to change properties dynamically via JS because they don't get a studio ID
| Property | Type | Name | Description |
|---|---|---|---|
title |
string | Title | This is the name/label shown on the specific tab. |
| Property | Type | Name | Description |
|---|---|---|---|
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
padding |
string | Padding | Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding. |
| Action Name | Description |
|---|---|
| Add Tab | Adds a Tab widget to the Tabs and place it in bottom of the last one. |
The button is a simple HTML button and can fire click events to trigger services on other widgets or external data. You could also use Ionicon classes on buttons to use Icons instead of just text. See Class property for an example.
| Property | Type | Name | Description |
|---|---|---|---|
disabled |
boolean | Disabled | Dependent on the value the widget is selectable or not. This property adds a CSS class .button[disabled] { |
| Property | Type | Name | Description |
|---|---|---|---|
text |
string | Text | Change the text of the label. |
class |
string | Class | Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a". |
visible |
boolean | Visible | Changes the visibility depending on the given value. |
margin |
string | Margin | Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin. |
| Event | Name | Description |
|---|---|---|
click |
Click | Fired when the user interacts with the button by clicking/touching on it. |
The Scan widget allows you to scan QR or bar codes in an Experience.
Official Scan Widget Documentation
| Property | Type | Name | Description |
|---|---|---|---|
isAugmentationsHidden |
boolean | Hide 3D Augmentations | When selected, 3D augmentations for the screenshot are hidden. |
scannedValue |
string | Scanned Value | When bound to a widget that includes text, this property displays the value of the barcode or QR code. For example, if a barcode on a computer is scanned, the serial number is displayed. |
| Property | Type | Name | Description |
|---|---|---|---|
text |
string | Text | The text that is displayed when scan view appears. |
class |
string | Class | Here you add CSS classes to change the appearance (like class attribute in HTML) |
| Service | Name | Description |
|---|---|---|
startScan |
Start Scan | Invoking this service will start the camera to scan for a code. |
stopScan* |
Stop Scan | Invoking this service will stop the camera to scan for a code. |
*Only available in 3D Eyewear Experiences
| Event | Name | Description |
|---|---|---|
valueacquired |
Value Acquired | Triggered when the scan value is acquired. |
usercanceled |
User Canceled | Triggered when a user cancels the scan. |
This small article shows you how to retrieve rest data via the XMLHttpRequest object. Despite it's name, it can be used to retrieve any type of data, not only XML.
Retrieves all timezones inside of Europe on start of the experience.
$scope.$on("$ionicView.afterEnter", function (event) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://worldtimeapi.org/api/timezone/Europe');
xhr.withCredentials = false;
xhr.send();
xhr.onload = function() {
if (xhr.status != 200) { // analyze HTTP status of the response
$scope.view.wdg['resultText'].text = xhr.status + " " + xhr.statusText;
}
else { // show the result
$scope.view.wdg['resultText'].text = xhr.response;
}
};
});
We first create subscribe to the $ionicView.afterEnter event which gets fired after the experience finished loading.
$scope.$on("$ionicView.afterEnter", function (event) {...Afterwards we create a new XMLHttpRequest object.
let xhr = new XMLHttpRequest();Then we open the link and add additional credentials if needed and send the request.
xhr.open('GET', 'http://worldtimeapi.org/api/timezone/Europe');
xhr.withCredentials = false;
xhr.send();Once sent we can listen to the onload function. Once it's ready we should check if the HTTP response status is successful. We can put our logic into that, in this case, setting a text with the response.
xhr.onload = function() {
if (xhr.status != 200)
{
//setting the text to the status, if it's not successful.
$scope.view.wdg['resultText'].text = xhr.status + " " + xhr.statusText;
}
else {
//setting the text to the successful response.
$scope.view.wdg['resultText'].text = xhr.response;
}
};Here are a few more resources that will come in handy trying to retrieve data from a URL:
XMLHttpRequest Examples by w3schools
Easy to follow practical examples regarding the
XMLHttpRequestobject.
Using XMLHttpRequest from Mozilla
Extensive examples how to use the
XMLHttpRequestobject.
Documentation regarding each property of the the
XMLHttpRequestobject.